<div class="page-title">
  <div class="row">
    <div class="col-xs-9">
      <h1>Configurations<span *ngIf="shownConfigurationId"> / {{ shownConfigurationId }}</span></h1>
    </div>
    <div class="col-xs-3 main-button">
      <button
        type="button"
        class="btn btn-primary"
        (click)="editConfiguration()"
        [shownFor]="'create_playbook_configuration'"
      >
        Create New Configuration
      </button>
    </div>
  </div>
</div>

<filter
  *ngIf="!shownConfigurationId"
  (onChange)="fetchData()"
>
  <search criterion [target]="'name'"></search>
  <choice criterion
    [target]="'playbook_id'"
    [title]="'Playbook'"
    [values]="getPlaybooksForFilter()"
  ></choice>
</filter>

<pager
  [pagingData]="pagedData"
  [isHidden]="!!shownConfigurationId"
  (onChange)="refreshConfigurations($event)"
></pager>

<div class="configurations row" *ngIf="getConfigurations().length">
  <div class="col-xs-12">
    <div class="table-help">
      <div class="col-xs-3">Configuration Name</div>
      <div class="col-xs-3">Playbook</div>
      <div class="col-xs-6">Created</div>
    </div>

    <div
      class="box"
      [ngClass]="{open: isCurrent(configuration)}"
      *ngFor="let configuration of getConfigurations()|id:shownConfigurationId"
    >
      <div class="col-xs-3 name">{{configuration.data.name}}</div>
      <div class="col-xs-3 parameter">{{configuration.data.playbook_id|deparametrize}}</div>
      <div class="col-xs-5 parameter">{{configuration.time_updated|date_time}}</div>
      <div class="col-xs-1 action">
        <a
          [routerLink]="['/configurations']"
          [fragment]="isCurrent(configuration) ? '' : configuration.id"
          [shownFor]="'view_playbook_configuration_version'"
        >
          <span
            class="glyphicon"
            [ngClass]="'glyphicon-triangle-' + (isCurrent(configuration) ? 'bottom' : 'right')"
          ></span>
        </a>
      </div>
      <div class="bowels" *ngIf="isCurrent(configuration)">
        <div class="col-xs-10"><h3>Versions</h3></div>
        <div class="col-xs-2 delete">
          <button
              type="button"
              class="btn btn-danger btn-xs"
              (confirmedClick)="deleteConfiguration(configuration)"
              [confirmation]="'Delete configuration ' + configuration.data.name + '?'"
              [shownFor]="'delete_playbook_configuration'"
            >
              Delete
            </button>
        </div>
        <div *ngFor="let version of getConfigurationVersions(configuration.id);let i = index">

          <div class="col-xs-12"><div class="line"></div></div>

          <div class="col-xs-3 name">
            {{version.data.name}} ({{version.version}})
          </div>
          <div class="col-xs-3 parameter"></div>
          <div class="col-xs-3 parameter">{{version.time_updated|date_time}}</div>
          <div class="col-xs-3 buttons">
            <button
              *ngIf="!i"
              type="button"
              class="btn btn-primary btn-xs"
              (click)="editConfiguration(version)"
              [shownFor]="'edit_playbook_configuration'"
            >
              Edit
            </button>
            <button
              type="button"
              class="btn btn-primary btn-xs"
              (click)="editConfiguration(version, true)"
            >
              View
            </button>
            <button
              type="button"
              class="btn btn-success btn-xs"
              (click)="executeConfiguration(version)"
              [shownFor]="'create_execution'"
            >
              Execute
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<pager
  [pagingData]="pagedData"
  [isHidden]="!!shownConfigurationId"
  (onChange)="refreshConfigurations($event)"
></pager>

<loader *ngIf="!configurations"></loader>

<div *ngIf="!getConfigurations().length" class="no-configurations">
  You don't have any configurations yet. Please create.
</div>

<modal [title]="'Playbook Configuration'">
  <wizard
    [steps]="configurationSteps"
    (saveHandler)="save($event)"
  ></wizard>
</modal>